<template>
  <div class="mainor">
    <div class="main_spac1 paddingBottom5">
      <div class="main_white padding10 paddingBottom0">
        <!-- 头部 -->
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>购物车</span>
          </div>
          <div class="main_crumbs_r boxnr"></div>
        </div>
        <!-- 主体表格 -->
        <div class="main_white">
          <div class="main_num boxdq padding10">
            <div class="main_num_l boxha">
              <p class="tip">
                请在（{{ data.open_time }}~{{ data.end_time }}）之间下单
              </p>
            </div>
            <div class="main_num_r box">
              <p>
                <el-button @click="cleanCart">清空购物车</el-button>
              </p>
            </div>
          </div>
          <div class="main_table paddingBottom20" style="">
            <el-table
              ref="multipleTable"
              :data="data.list"
              v-loading="listLoading"
              element-loading-text="加载中"
              border
              highlight-current-row
              :header-cell-class-name="this.$verticaline"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" />
              <el-table-column
                label="商品图片"
                prop="name"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <div class="demo-image__error mainor_im">
                    <el-image
                      fit="fill"
                      :src="scope.row.pic"
                      :preview-src-list="scope.row.pics"
                    >
                      <div slot="error" class="image-slot">
                        <img :src="puzzleImg" />
                      </div>
                    </el-image>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="商品名称"
                prop=""
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  {{ scope.row.goods ? scope.row.goods.name : "" }}【{{
                    scope.row.spu.spu_name ? scope.row.spu.spu_name.title : ""
                  }}】
                </template>
              </el-table-column>
              <el-table-column
                label="单位"
                prop=""
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  {{ scope.row.spu.spu_nit ? scope.row.spu.spu_nit.title : "" }}
                </template>
              </el-table-column>
              <el-table-column
                label="描述"
                prop="goods.describe"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="互调比"
                prop=""
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  {{ scope.row.spu ? scope.row.spu.package_num : "" }}
                </template>
              </el-table-column>
              <el-table-column
                label="单价"
                prop=""
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  {{
                    scope.row.market_price
                      ? $toFixed(parseFloat(scope.row.market_price))
                      : ""
                  }}
                </template>
              </el-table-column>
              <el-table-column
                label="起订量"
                prop=""
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  {{ scope.row.spu ? scope.row.spu.minimum : "" }}
                </template>
              </el-table-column>
              <el-table-column
                label="库存量"
                prop=""
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  {{
                    scope.row.spu.inventory ? scope.row.spu.inventory.num : ""
                  }}
                </template>
              </el-table-column>
              <el-table-column
                label="批发数量"
                prop=""
                align="center"
                width="220"
              >
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.num"
                    @change="handleChange(scope)"
                    @blur="cartnumBlur(scope)"
                    :min="scope.row.minimum_copy"
                    label="描述文字"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                label="使用建议"
                prop="name"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span class="use_advice" v-if="scope.row.oids"> 是 </span>
                  <span class="use_advice" v-if="!scope.row.oids"> 否 </span>
                </template>
              </el-table-column>
              <el-table-column
                label=""
                prop="name"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <el-link type="danger" @click="delGoods(scope)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="bottom_box paddingBottom20">
          <div class="bottom_left">
            <p v-if="data.receive == 0">
              收货信息：收货信息没有配置，请在平台信息中完善！
              <router-link to="/global/system/config" style="color: #ea1212"
                >跳转</router-link
              >
            </p>
            <p v-if="data.union == 0">
              在线支付：在线支付没有配置，请在第三方配置中完善！
              <router-link to="/global/third" style="color: #ea1212"
                >跳转</router-link
              >
            </p>
          </div>
          <div class="bottom_right">
            <div class="top">
              合计：<span class="price"> ￥{{ money.total }} </span>
            </div>
            <div class="bottom">
              <p v-if="data.union == 0 || data.receive == 0">
                提醒：请完善配置信息！
              </p>
              <el-button :type="isSet ? 'primary' : 'info'" @click="commit"
                >结算</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { puzzleImg } from "@/api/currency";
import {
  bulk_cart,
  bulk_cart_clean,
  bulk_cart_del,
  bulk_cart_close,
  bulk_order_addCart,
} from "@/api/bulk/index";
import { parseTime } from "@/utils/index";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
export default {
  computed: {
    ...mapGetters(["avatar"]),
    money() {
      let total = 0,
        transport = 0;
      this.selectArr.map((e) => {
        let sc = parseFloat(e.market_price) * parseFloat(e.num);
        total += sc;
      });
      total ? (total = this.$toFixed(total)) : 0;
      return { total };
    },
  },
  data() {
    return {
      puzzleImg,
      // 请求数据
      data: {
        open_time: "",
        end_time: "",
        receive: 1,
        union: 1,
        list: [],
      },
      listLoading: false,
      isclick: true,
      // 配置
      isSet: true,
      selectArr: [],
      // 费用
      cost: {
        total: 0,
        transport: 0,
      },
    };
  },
  created() {
    this.bulk_cart();
  },
  methods: {
    // 购物车列表数据
    bulk_cart() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      bulk_cart(data).then((res) => {
        console.log(res)
        if (res.errcode == 0) {
          res.data.list.map((e) => {
            if (e.num > 0) {
              e.minimum_copy = e.num;
            } else {
              e.minimum_copy = 0;
            }
            if (e.goods.images.length > 0) {
              e.goods.images.map((a) => {
                a.path = this.avatar.domain + "/" + a.path;
                if (a.main == 1) {
                  e.pic = a.path;
                }
              });
              e.pics = e.goods.images.map((s) => s.path);
            } else {
              e.pic = "";
              e.pics = [];
            }
          });
          if (res.data.union == 0 || res.data.receive == 0) {
            this.isSet = false;
          }
          this.data = res.data;
          this.listLoading = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 删除购物车的商品
    delGoods(scope) {
      let index = scope.$index;
      let id = scope.row.id;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id }
      );
      bulk_cart_del(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("删除成功");
          this.bulk_cart();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 清空购物车
    cleanCart() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      this.$confirm("此操作将清空购物车, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        bulk_cart_clean(data).then((res) => {
          if (res.errcode == 0) {
            this.$message.success("清空购物车成功！");
            this.bulk_cart();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    // 批发数量添加
    handleChange(scope) {
      if (scope.row.cart_num < scope.row.minimum) {
        scope.row.cart_num = scope.row.minimum;
      }
      if (this.isclick) {
        this.isclick = false;
        setTimeout(() => {
          this.isclick = true;
          let form = {
            goods_spu_id: scope.row.spu.id,
            goods_id: scope.row.goods_id,
            num: scope.row.num,
          };
          this.bulk_order_addCart(form);
        }, 500);
      }
    },
    cartnumBlur(scope) {
      this.handleChange();
    },
    // 添加到购物车
    bulk_order_addCart(form) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      bulk_order_addCart(data).then((res) => {
        if (res.errcode == 0) {
          this.monitorForm.cart_data = res.data.cart_data;
        } else {
          this.bulk_cart();
          this.$message.error(res.msg);
        }
      });
    },
    //   结算
    commit() {
      if (!this.isSet) {
        this.$alert("请完善配置信息", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$router.push({
              path: "/global/system/config",
            });
          },
        });
      } else {
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
            ),
          },
          apiUrl().name
        );
        if (this.selectArr.length > 0) {
          let cart_ids = [];
          this.selectArr.map((e) => {
            cart_ids.push(e.id);
          });
          cart_ids = JSON.stringify(cart_ids);
          this.$router.push({
            name: "bulk_shopcart_commit",
            params: {
              cart_ids: cart_ids,
              send_time: this.$route.params.send_time,
            },
          });
        } else {
          this.$message.warning("请勾选商品");
        }
      }
    },
    // 结算请求

    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = [];
      this.selectArr = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.tip {
  color: #ea1212;
}
.main_table {
  min-height: 400px;
}
.main_table /deep/.el-table--small td .cell {
  height: 50px;
  line-height: 50px;
}
.use_advice {
  padding: 0 10px;
  &:first-child {
    color: #03a98e;
  }
  &:last-child {
    color: #ea1212;
  }
}

// 底部信息区域
.bottom_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .bottom_left {
    p {
      line-height: 30px;
      font-size: 14px;
      color: #ea1212;
    }
  }
  .bottom_right {
    text-align: right;
    .top {
      display: flex;
      align-content: center;
      align-items: center;

      .price {
        color: #ea1212;
        font-size: 20px;
        font-weight: 700;
      }
    }
    .bottom {
      margin-top: 27px;
      p {
        color: #ea1212;
        margin-bottom: 27px;
      }
      .el-button {
        width: 120px;
      }
    }
  }
}
</style>